<script setup lang="ts">
import {ref, watch} from "vue";
// import {useRouter} from "vue-router";
import SelectedArticles from "@/components/index/article/SelectedArticles.vue";
import TeacherSection from "@/components/index/teacher/TeacherSection.vue";
import {useRouter} from "vue-router";

// 关于顶部的tab切换
const active = ref(0);

const router = useRouter()
function jumpTeacherDetail(teacher) {
    router.push({
        path: '/teacherDetail',
        query: {id: teacher.id}
    })
}

function jumpArticleDetail(article) {
    router.push({
        path: '/textDetail',
        query: {id: article.id}
    })
}

const props = defineProps({
    searchInfo:{
        required:true,
        type:Object,
        default:()=>{
            return {
                psyTeacherVos:[],
                psyArticleVos:[]
            }
        }
    }
})

</script>

<template>

    <div>
        <van-tabs v-model:active="active" shrink>
            <van-tab title="综合">
                <!--                咨询师-->
                <div class="compositeTeacher">
                    <van-cell-group inset>
                        <van-cell title="咨询师" value="更多" @click="active=1"
                                  style="font-size: 18px;background-color: #F5F5F5"/>
                    </van-cell-group>

                    <div ref="teacherSection" v-for="teacher in props.searchInfo.psyTeacherVos" :key="teacher.id">
                        <TeacherSection :eachTeacher="teacher" @click="jumpTeacherDetail(teacher)"
                                        class="TeacherSection"></TeacherSection>
                    </div>
                </div>
                <!--                文章-->
                <div class="compositeText">
                    <van-cell-group inset>
                        <van-cell title="文章" value="更多" @click="active=2"
                                  style="font-size: 18px;background-color: #F5F5F5"/>
                    </van-cell-group>
                    <template v-for="article in props.searchInfo.psyArticleVos" :key="article.id">
                        <SelectedArticles :articleInfo="article" @click="jumpArticleDetail(article)"
                                          class="SelectedArticles"></SelectedArticles>
                    </template>
                </div>
            </van-tab>
            <!--            tab切换到咨询师-->
            <van-tab title="咨询师">
                <template v-for="teacher in props.searchInfo.psyTeacherVos" :key="teacher.id">
                    <TeacherSection :eachTeacher="teacher" @click="jumpTeacherDetail(teacher)"
                                    class="TeacherSection"></TeacherSection>
                </template>
            </van-tab>
            <!--            tab切换到文章-->
            <van-tab title="文章">
                <template v-for="article in props.searchInfo.psyArticleVos" :key="article.id">
                    <SelectedArticles :articleInfo="article" @click="jumpArticleDetail(article)"
                                      class="SelectedArticles"></SelectedArticles>
                </template>
            </van-tab>
        </van-tabs>
    </div>
</template>

<style scoped lang="less">
.TeacherSection {
  //border: 1px solid #9e75f5;
}
</style>